<template>
  <transition appear name="side_anime">
    <div id="board2">
      <h1>待取药病人列表</h1>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="日期"
          width="180">
          <template #default="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{scope.row.time}}</span>
          </template>
        </el-table-column>
        
        <el-table-column
            prop="name"
            label="姓名"
            width="120">
        </el-table-column>

        <el-table-column
            prop="sex"
            label="性别"
            width="120">
        </el-table-column>

        <el-table-column
            prop="age"
            label="年龄"
            width="120">
        </el-table-column>
        
        <el-table-column
            :formatter="stateFormat"
            prop="status"
            label="状态" 
            width="120">
          </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              icon="el-icon-view"
              size="mini"
              type="primary"
              @click="queryMedi(scope.$index,scope.row)">药物清单</el-button>
            <el-button 
              icon="el-icon-check"
              size="mini" 
              type="success"
              @click="confirm(scope.$index,scope.row)">确认取药</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          v-model:currentPage="currentPage"
          v-model:pageSize="pageSize"
          background
          :page-size="8"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </transition>

</template>



<script>
import {takeMedicineList} from '../../api/api'
import {confirmTaking} from '../../api/api'
export default {
    data() {
      return {
        tableData: [],
        currentPage: 1,
        pageSize:8,
        total:0
      }
    },

    mounted() {
      this.getTakeMedicineList(1);
    },

    methods: {
      handleSizeChange(val) {
        this.currentPage = 1;
        this.pageSize = val;
        this.getTakeMedicineList();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getTakeMedicineList(val);
      },

      //获取待取药病人列表
      getTakeMedicineList(page) {
        let token = this.$store.state.medicalStaff.loginData.tokenValue
        console.log(token)
        let data = {
          'page':page,
          'size':8
        }
        let header = {
          'satoken':token
        }
        takeMedicineList(data,header).then(response =>{
          console.log('请求成功',response)
          if (response.ret == '0'){
            this.tableData = response.patientListItems.list
            this.total = response.patientListItems.total
          }else {
            alert("暂无未取药病人")
          }
        })
      },

      //确认取药
      confirm(index,row) {
        console.log(index, row)
        let data = {
          id:row.id
        }
        let token = this.$store.state.medicalStaff.loginData.tokenValue
        let header = {
          'satoken':token
        }
        console.log(row.id)
        // console.log(token);
        confirmTaking(data,header).then(response => {
          console.log('请求成功',response)
          if (response.ret == '0'){
            this.tableData.splice(index,1)
            this.$router.push('/homeview/takeMedicine')
            this.$message({
              message:'确认成功',
              type: 'success',
              showClose:true
            })
          }else {
            this.$message({
              message:'确认失败',
              type: 'error',
              showClose:true
            })
          }
        })
      },

      //查看药物清单
      queryMedi(index,row) {
        console.log(index, row)
        this.$router.push({
          "name":"medicineRecord",
          "params":{
            "id":row.id
          }
        })
      }
    }
  }
</script>

<style scoped>
.side_anime-enter-from,.side_anime-leave-to{
  opacity: 1;
}

.side_anime-enter-active{
  animation: slideInLeft 1s;
}

.side_anime-leave-active{
  animation: slideOutLeft 1s;
}

.pagination {
  margin-top: 30px;
}
</style>
